﻿@page "/components/panel"

<PageOutlet Url="components/Panel"
            Title="Panel"
            Description="panel component of the bit BlazorUI components" />

<div>
    <DemoPage Name="Panel"
              Description="Panels are overlays that contain supplementary content and are used for complex creation, edit, or management experiences. For example, viewing details about an item in a list or editing settings."
              Parameters="componentParameters"
              SubClasses="componentSubClasses"
              SubEnums="componentSubEnums"
              GitHubUrl="Surfaces/Panel/BitPanel.razor"
              GitHubDemoUrl="Surfaces/Panel/BitPanelDemo.razor">
        <DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
            <BitButton OnClick="() => isBasicPanelOpen = true">Open Panel</BitButton>
            <BitPanel @bind-IsOpen="isBasicPanelOpen">
                <div style="max-width:300px;padding:1rem">
                    Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. 
                    Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment 
                    when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, 
                    for ideas that change minds and spark emotions. This is where the journey begins your words will lead the way.
                </div>
            </BitPanel>
        </DemoExample>

        <DemoExample Title="Advanced options" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
            <div>BitPanel has some advanced options to be customized.</div>
            <br /><br />
            <div>Blocking:</div><br />
            <BitButton OnClick="() => isBlockingPanelOpen = true">Open Panel</BitButton>
            <BitPanel @bind-IsOpen="isBlockingPanelOpen" Blocking>
                <div style="max-width:300px;padding:1rem">
                    <h3>Blocking</h3>
                    <div>
                        Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. 
                        Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment 
                        when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, 
                        for ideas that change minds and spark emotions. This is where the journey begins your words will lead the way.
                    </div>
                    <BitButton OnClick="() => isBlockingPanelOpen = false">Close</BitButton>
                </div>
            </BitPanel>
            <br /><br /><br />
            <div>Modeless:</div><br />
            <BitButton OnClick="() => isModelessPanelOpen = true">Open Panel</BitButton>
            <BitPanel @bind-IsOpen="isModelessPanelOpen" @ref="modelessPanelRef" Modeless>
                <div style="max-width:300px;padding:1rem">
                    <h3>Modeless</h3>
                    <div>
                        Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. 
                        Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment 
                        when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, 
                        for ideas that change minds and spark emotions. This is where the journey begins your words will lead the way.
                    </div>
                    <BitButton OnClick="() => modelessPanelRef.Close()">Close</BitButton>
                </div>
            </BitPanel>
            <br /><br /><br />
            <div>AutoToggleScroll:</div><br />
            <BitButton OnClick="() => isAutoToggleScrollPanelOpen = true">Open Panel</BitButton>
            <BitPanel @bind-IsOpen="isAutoToggleScrollPanelOpen" AutoToggleScroll>
                <div style="max-width:300px;padding:1rem">
                    <h3>AutoToggleScroll</h3>
                    Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. 
                    Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment 
                    when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, 
                    for ideas that change minds and spark emotions. This is where the journey begins your words will lead the way.
                </div>
            </BitPanel>
        </DemoExample>

        <DemoExample Title="Position and size" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
            <div>To set the Panel position on the page you can use the Position parameter.</div>
            <br /><br />
            <div class="position-btn">
                <BitNumberField @bind-Value="customPanelSize" Mode="BitSpinButtonMode.Inline" Label="Custom size" />
                <div>
                    <BitButton OnClick="() => isOpenInPositionStart = true">Start</BitButton>
                    <BitButton OnClick="() => isOpenPositionEnd = true">End</BitButton>
                </div>
                <div>
                    <BitButton OnClick="() => isOpenInPositionTop = true">Top</BitButton>
                    <BitButton OnClick="() => isOpenInPositionBottom = true">Bottom</BitButton>
                </div>
            </div>

            <BitPanel @bind-Size="customPanelSize"
                      @bind-IsOpen="isOpenInPositionStart"
                      Position="BitPanelPosition.Start">
                <div style="padding:1rem">
                    BitPanel with Start position and custom Size.
                    <BitNumberField @bind-Value="customPanelSize" Mode="BitSpinButtonMode.Inline" Label="Custom size" />
                </div>
            </BitPanel>

            <BitPanel @bind-Size="customPanelSize"
                      @bind-IsOpen="isOpenPositionEnd"
                      Position="BitPanelPosition.End">
                <div style="padding:1rem">
                    BitPanel with End position and custom Size.
                    <BitNumberField @bind-Value="customPanelSize" Mode="BitSpinButtonMode.Inline" Label="Custom size" />
                </div>
            </BitPanel>

            <BitPanel @bind-Size="customPanelSize" @bind-IsOpen="isOpenInPositionTop" Position="BitPanelPosition.Top">
                <div style="padding:1rem">
                    BitPanel with Top position and custom Size.
                    <BitNumberField @bind-Value="customPanelSize" Mode="BitSpinButtonMode.Inline" Label="Custom size" />
                </div>
            </BitPanel>

            <BitPanel @bind-Size="customPanelSize"
                      @bind-IsOpen="isOpenInPositionBottom"
                      Position="BitPanelPosition.Bottom">
                <div style="padding:1rem">
                    BitPanel with Bottom position and custom Size.
                    <BitNumberField @bind-Value="customPanelSize" Mode="BitSpinButtonMode.Inline" Label="Custom size" />
                </div>
            </BitPanel>
        </DemoExample>

        <DemoExample Title="Style & Class" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
            <div>Explore styling and class customization for BitPanel, including component styles, custom classes, and detailed styles.</div>
            <br /><br />
            <div>Component's Style & Class:</div><br />
            <BitButton OnClick="() => isStyledPanelOpen = true">Open Styled panel</BitButton>
            <BitPanel @bind-IsOpen="isStyledPanelOpen" Style="font-size: 3rem;">
                <div style="padding:1rem">
                    BitPanel with custom style.
                </div>
            </BitPanel>
            <br /><br />
            <BitButton OnClick="() => isClassedPanelOpen = true">Open Classed panel</BitButton>
            <BitPanel @bind-IsOpen="isClassedPanelOpen" Class="custom-class">
                <div style="padding:1rem">
                    BitPanel with custom class:
                    <div class="item">Item 1</div>
                    <div class="item">Item 2</div>
                    <div class="item">Item 3</div>
                </div>
            </BitPanel>
            <br /><br /><br /><br />
            <div><b>Styles</b> & <b>Classes</b>:</div><br />
            <BitButton OnClick="() => isPanelStylesOpen = true">Open panel Styles</BitButton>
            <BitPanel @bind-IsOpen="isPanelStylesOpen"
                      Styles="@(new() { Overlay = "background-color: #4776f433;",
                                            Container = "padding: 1rem; box-shadow: 0 0 1rem tomato;" })">
                BitPanel with <b>Styles</b> to customize its elements.
            </BitPanel>
            <br /><br />
            <BitButton OnClick="() => isPanelClassesOpen = true">Open panel Classes</BitButton>
            <BitPanel @bind-IsOpen="isPanelClassesOpen"
                      Classes="@(new() { Container = "custom-container",
                                             Overlay = "custom-overlay" })">
                BitPanel with <b>Classes</b> to customize its elements.
            </BitPanel>
        </DemoExample>

        <DemoExample Title="RTL" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
            <div>Use BitPanel in right-to-left (RTL).</div>
            <br /><br />
            <div>
                <div class="position-btn" dir="rtl">
                    <div>
                        <BitButton OnClick="() => isRtlPanelOpenStart = true">آغاز</BitButton>
                        <BitButton OnClick="() => isRtlPanelOpenEnd = true">پایان</BitButton>
                    </div>
                </div>

                <BitPanel @bind-IsOpen="isRtlPanelOpenStart"
                          Dir="BitDir.Rtl"
                          Position="BitPanelPosition.Start">
                    <div style="max-width:300px;padding:1rem">
                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
                        چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
                        کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
                        در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
                    </div>
                </BitPanel>

                <BitPanel @bind-IsOpen="isRtlPanelOpenEnd"
                          Dir="BitDir.Rtl"
                          Position="BitPanelPosition.End">
                    <div style="max-width:300px;padding:1rem">
                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
                        چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
                        کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
                        در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
                    </div>
                </BitPanel>
            </div>
        </DemoExample>

    </DemoPage>
</div>